<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>商品详情</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- page style -->
  <style>
  .my-input{
    width: 22.77777778% !important;
  }
  .my-label{
	width: 10.55555555% !important;
  }
  .my-img{
	padding-right: 2.0% !important;
    padding-left: 8.0% !important;
  }
  .datepicker{
    z-index: 9999 !important;
  }
  </style>
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="/admin/css/bootstrap/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/admin/css/font-awesome/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/admin/css/Ionicons/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/admin/css/AdminLTE/AdminLTE.min.css">
  <!-- AdminLTE Skin -->
  <link rel="stylesheet" href="/admin/css/AdminLTE/skin/skin-blue.min.css">
  <!-- Google Font -->
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <div th:replace="~{admin/commons/commons::header}"></div>
  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="~{admin/commons/commons::sidebar}"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1><small></small></h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard">&nbsp;商品管理</i></li>
        <li><a href="/admin/product_list"><i class="fa"></i>所有商品</a></li>
        <li class="active">商品详情</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">
      <!-- Horizontal Form -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">详细信息</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal" role="form">
          <div class="box-body">
            <div class="form-group">
			  <label for="isbn" class="col-sm-2 control-label my-label">图书编号</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="isbn" id="isbn" th:value="${book.isbn}" readonly>
              </div>
			  <label for="title" class="col-sm-2 control-label my-label">书名</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="title" id="title" th:value="${book.title}" readonly>
              </div>
			  <label for="author" class="col-sm-2 control-label my-label">作者</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="author" id="author" th:value="${book.author}" readonly>
              </div>
            </div>
            <div class="form-group">
			  <label for="price" class="col-sm-2 control-label my-label">价格</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="price" id="price" th:value="${book.price}" readonly>
              </div>
			  <label for="pages" class="col-sm-2 control-label my-label">页数</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="pages" id="pages" th:value="${book.pages}" readonly>
              </div>
			  <label for="words" class="col-sm-2 control-label my-label">字数</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="words" id="words" th:value="${book.words}" readonly>
              </div>
            </div>
            <div class="form-group">
			  <label for="press" class="col-sm-2 control-label my-label">出版社</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="press" id="press" th:value="${book.press}" readonly>
              </div>
			  <label for="edition" class="col-sm-2 control-label my-label">版次</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="edition" id="edition" th:value="${book.edition}" readonly>
              </div>
			  <label for="published" class="col-sm-2 control-label my-label">出版日期</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="published" id="published" th:value="${#dates.format(book.published,'yyyy-MM-dd HH:mm:ss')}" readonly>
              </div>
            </div>
            <div class="form-group">
			  <label for="format" class="col-sm-2 control-label my-label">开本</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="format" id="format" th:value="${book.format}" readonly>
              </div>
			  <label for="packaging" class="col-sm-2 control-label my-label">包装</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="packaging" id="packaging" th:value="${book.packaging}" readonly>
              </div>
			  <label for="form" class="col-sm-2 control-label my-label">用纸</label>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="form" id="form" th:value="${book.form}" readonly>
              </div>
            </div>
            <div class="form-group">
			  <div class="col-sm-4 my-img">
                <img class="img-responsive" th:src="@{'/user/img/goods/'+${book.isbn}+'/detail1big.jpg'}" alt="Detail 1 Photo is missing">
              </div>
			  <div class="col-sm-4 my-img">
                <img class="img-responsive" th:src="@{'/user/img/goods/'+${book.isbn}+'/detail2big.jpg'}" alt="Detail 2 Photo is missing">
              </div>
			  <div class="col-sm-4 my-img">
                <img class="img-responsive" th:src="@{'/user/img/goods/'+${book.isbn}+'/detail3big.jpg'}" alt="Detail 3 Photo is missing">
              </div>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
          </div>
          <!-- /.box-footer -->
        </form>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <div th:replace="~{admin/commons/commons::footer}"></div>

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="/admin/js/jquery/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/admin/js/bootstrap/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/admin/js/AdminLTE/adminlte.min.js"></script>
<!-- page script -->
<script>

</script>
</body>
</html>
